<template>
    <div>
        <el-row :gutter="20" class="continerRow" style="width: 99%;">
            <!-- 左侧 -->
            <el-col :span="statement.status == 0? 15 : 23" :offset="1" class="leftContiner">
                <!-- 左上 -->
                <el-row>
                    <el-col span:24 class="leftTop">
                        <el-descriptions :column="2">
                            <el-descriptions-item label="客户姓名"><span class="desStyle">{{ statement.customerName }}</span></el-descriptions-item>
                            <el-descriptions-item label="联系方式"><span class="desStyle">{{ statement.customerPhone }}</span></el-descriptions-item>
                            <el-descriptions-item label="车牌号码"><span class="desStyle">{{ statement.licensePlate }}</span></el-descriptions-item>
                            <el-descriptions-item label="汽车类型"><span class="desStyle">{{ statement.carSeries }}</span></el-descriptions-item>
                            <el-descriptions-item label="服务类型">
                                <span class="desStyle">                                 
                                    <dict-tag :options="dict.type.item_serv_type" :value="statement.serviceType"/>
                                </span>
                            </el-descriptions-item>
                            <el-descriptions-item label="到店时间"><span class="desStyle">{{ statement.actualArrivalTime }}</span></el-descriptions-item>
                            <el-descriptions-item label="总计金额"><span class="desStyle">{{ totalSum }}</span></el-descriptions-item>
                            <el-descriptions-item label="实付价格" v-cloak><span class="desStyle">{{ totalPrice }}</span></el-descriptions-item>
                            <el-descriptions-item label="优惠价格" v-if="statement.status == 0">
                                <span class="desStyle desStyleThree"><el-input @keyup.native="dicountcountAmountModifly($event)" v-model="statement.discountAmount"></el-input></span>
                            </el-descriptions-item>
                            <el-descriptions-item label="优惠价格" v-if="statement.status == 1"><span class="desStyle desStyleTo">{{ statement.discountAmount }}</span></el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
                <!-- 左下 -->
                <el-row class="leftBottom">
                    <!-- 按钮部分 -->
                    <el-col :span="1.5"  v-if="statement.status == 0">
                        <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        :disabled="saveFlag"
                        @click="saveHandle()"
                        >保存</el-button>
                        <el-button
                        type="warning"
                        plain
                        icon="el-icon-money"
                        size="mini"
                        :disabled="payFlag"
                        @click="payHandle()"
                        >支付</el-button>
                    </el-col>
                    <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
                    <!-- 结算单详情数据列表 -->
                    <el-col :span="24" class="leftBottom_data">
                        <el-table
                            :data="statementItemList"
                            style="width: 100%">
                            <el-table-column
                                align="center"
                                prop="itemName"
                                label="服务名称">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="itemPrice"
                                label="服务价格">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="itemQuantity"
                                label="服务数量">
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                v-if="statement.status == 0">
                                <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    icon="el-icon-plus"
                                    type="primary"
                                    @click="plusHandle(scope.$index)"
                                    >
                                    </el-button>
                                    <el-button
                                    size="mini"
                                    icon="el-icon-minus"
                                    type="danger"
                                    @click="minusHandle(scope.$index)"
                                    >
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="page">
                            显示第 1 到第 {{ statementItemList.length }} 条记录，总共
                            {{ statementItemList.length }} 条记录
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="8" class="rightContiner" v-if="statement.status == 0">
                <!-- 右上 -->
                <el-row>
                    <el-col :span="24" class="rightTop">
                        <el-form :model="queryParams" size="small" :inline="true" label-width="68px">
                            <el-form-item label="服务名称" prop="name">
                                <el-input
                                v-model="queryParams.name"
                                placeholder="请输入服务项名称"
                                clearable
                                @keyup.enter.native="handleQuery"
                                />
                            </el-form-item>
                            <el-form-item label="是否套餐" prop="carPackage">
                                <el-select v-model="queryParams.carPackage" placeholder="请选择是否套餐" clearable>
                                <el-option
                                    v-for="dict in dict.type.item_serv_package"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="服务分类" prop="serviceCatalog">
                                <el-select v-model="queryParams.serviceCatalog" placeholder="请选择服务分类" clearable>
                                <el-option
                                    v-for="dict in dict.type.item_serv_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="    ">
                                <el-button type="success" round icon="el-icon-search" size="medium"  @click="handleQuery">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <!-- 右下 -->
                <el-row>
                    <el-col :span="24" class="rightBottom">
                        <!-- 表格数据 -->
                        <el-table :data="serviceItemList" >
                        <el-table-column label="服务名称" align="center" prop="name" />
                        <el-table-column label="服务价格" align="center" prop="discountPrice" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button
                                    size="small"
                                    icon="el-icon-plus"
                                    type="primary"
                                    @click="serviceItemPlus(scope.row)"
                                ></el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                        <div class="page">
                            显示第 1 到第 {{ serviceItemList.length }} 条记录，总共
                            {{ serviceItemList.length }} 条记录
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getServiceItemList } from "@/api/business/serviceItem";  // 服务项 js
import { getStatement } from "@/api/business/statement";  // 服务项 js
import { saveStatementItem,getStatementItemListByStatementId,pay } from "@/api/business/statementItem";  // 服务项明细 js
export default {
    dicts:['item_serv_package','item_serv_type'],
    data(){
        return {
            statementId:this.$route.params.statementId, // 外界传递进来的 结算单id
            statementItemList:[],   // 结算单明细集合列表
            serviceItemList:[],     // 服务项集合列表（已上架）
            statement:{},
            // 查询参数
            queryParams:{
                name:null,
                carPackage:null,
                serviceCatalog:null,
                saleStatus:1    // 只查询已上架商品信息
            },
            showSearch:true,   // 显示隐藏中间保存和支付按钮
            saveFlag:true,      // 保存按钮显示与禁用
            payFlag:false,       // 支付按钮显示与禁用
        }
    },
    created(){
        // 初始化数据方法。
        this.initData();  
    },
    methods:{
        // 初始化数据方法
        initData(){
            // 加载服务项数据列表（已上架）    
            this.getServiceItemListHandle();
            // 加载指定结算单对象数据
            this.getStatementById();
            // 加载结算单对应的明细列表集合
            this.getStatementItemListById();
        },
        // 加载服务项数据列表（已上架）    
        getServiceItemListHandle(){
            getServiceItemList(this.queryParams)
            .then(response => {
                this.serviceItemList = response.data;
            })
        },
        // 加载指定结算单对象数据
        getStatementById(){
            getStatement(this.statementId).then(resp=>{
                this.statement = resp.data
            })
        },
        // 加载结算单对应的明细列表集合
        getStatementItemListById(){
            getStatementItemListByStatementId(this.statementId).then(resp=>{
                this.statementItemList = resp.data;
            })
        },
        // 点击右侧服务项的加号
        serviceItemPlus(row){
            // 封装一个新对象
            let obj = {
                itemName:row.name,
                itemPrice:row.discountPrice,
                itemQuantity:1,
                statementId:this.statementId,
                itemId:row.id
            }
            // 根据传入的 row.id 遍历寻找结算单明细中是否存在对应的 itemId。
            // 封装一个对比的方法。  getStatementItemIndexByserviceItemId
            let index = this.getStatementItemIndexByItemId(row.id);
            if(index > -1){
                // 若存在则该记录数量 +1
                this.statementItemList[index].itemQuantity++;
            } else {
                // 若不存在则添加该数据 （push）
                this.statementItemList.push(obj)
            }
            // 保存按钮启用，支付按钮禁用
            this.saveFlag = false;
            this.payFlag = true;
        },
        // 对比传入的 serviceItemId 在结算单明细列表中是否存在
        getStatementItemIndexByItemId(id){
             let index = -1;
            if(this.statementItemList.length <= 0){
                // 说明结算单明细列表中没有数据，是第一次添加。没有必要比对。
                return index;
            }
            this.statementItemList.forEach((e,i) => {
                if(id == e.itemId){
                    index = i;
                    return index;
                }
            })
            return index;
        },
        // 点击左侧结算单明细+号
        plusHandle(index){
            this.statementItemList[index].itemQuantity++;
             // 保存按钮启用，支付按钮禁用
            this.saveFlag = false;
            this.payFlag = true;
        },
        // 点击左侧结算单明细-号
        minusHandle(index){
            // 判断剩余数量
            if(this.statementItemList[index].itemQuantity == 1){
                // 若 itemQuantity 数量  == 1，已经是最后一个了。再次点击应该删除该元素
                this.statementItemList.splice(index,1)
            } else {
                // 若 != 1 则说明数量还可以继续减少。
                this.statementItemList[index].itemQuantity--;
            }
            // 保存按钮启用，支付按钮禁用
            this.saveFlag = false;
            this.payFlag = true;
            // 若减少到没有任何数据 那么 保存和支付按钮都熄灭
            if(this.statementItemList.length == 0){
                // 保存按钮启用，支付按钮禁用
                this.saveFlag = true;
                this.payFlag = true;
            }
        },
        // 搜索已上架的服务项
        handleQuery(){
            this.getServiceItemListHandle();
        },
        // 点击保存按钮
        saveHandle(){
            // 第一种 VO 方式。
            // 处理向后端发送的参数
            let obj = {
                statementItemList:this.statementItemList,
                discountAmount:this.statement.discountAmount
            }
            this.$modal.confirm("您确定需要保存该明细项吗？").then(() => {
                saveStatementItem(obj).then(() => {
                    this.$modal.msgSuccess("保存明细项成功")
                })
            })
            // 调用方法来发送请求
            // 第二种额外参数方式。
            // let obj = {
            //     itemName:null,
            //     itemPrice:this.statement.discountAmount,  // (同为 BigDecimal 类型)
            //     itemQuantity:null,
            //     statementId:null,
            //     itemId:null
            // }
            // this.statementItemList.push(obj);
            // this.$modal.confirm("您确定需要保存该明细项吗？").then(() => {
            //     saveStatementItem(this.statementItemList).then(() => {
            //         this.$modal.msgSuccess("保存明细项成功")
            //     })
            // })
            // 保存禁用，支付启用
            this.saveFlag = true;
            this.payFlag = false;
        },
        // 点击支付按钮(结算功能)
        payHandle(){
            this.$modal.confirm("您确定要支付该结算单吗？").then(()=>{
                pay(this.statementId).then(()=>{
                    // 成功提示
                    this.$modal.msgSuccess("支付成功");
                    // 支付成功后刷新结算单信息。
                    this.getStatementById();
                })
            })
            // 保存、支付全部禁用
            this.saveFlag = true;
            this.payFlag = true;
        },
        // 优惠价格合理化
        dicountcountAmountModifly(event){
            // 当按下键盘的 - 号，那么说明需要输入负数，那么我们将文本框清空并提示。
            if(event.keyCode === 109 || event.keyCode === 189){
                event.target.value = 0;
                // console.log(event.target.value);
                this.$modal.msgError("请不要输入负数！")
            }
            // 当优惠价格 > 总金额。 那么我们就让优惠价格 = 总价格。
            if(this.statement.discountAmount > this.totalSum){
                this.statement.discountAmount = this.totalSum
            }
            // 保存按钮启用，支付按钮禁用
            this.saveFlag = false;
            this.payFlag = true;
        }
    },
    computed:{
        // 计算总金额
        totalSum(){
            let sum = 0;
            this.statementItemList.forEach(e => {
                sum += e.itemPrice * e.itemQuantity;
            })
            return isNaN(sum) ? 0 : sum;
        },
        // 计算实付价格
        totalPrice(){
            return isNaN(this.totalSum - this.statement.discountAmount) ? 0 : this.totalSum - this.statement.discountAmount
                < 0 ? 0 : this.totalSum - this.statement.discountAmount;
        },
    }
}
</script>
<style>
    .continerRow{
        margin-top: 3%;
    }
    .desStyle{
        margin-left: 10%;
    }
    .desStyleTo{
        margin-left: 5%;
    }
    .desStyleThree{
        margin-left: 4%;
    }
    .leftTop{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        padding-left: 5%;
        padding-top:2%;
        color: #333;
        font-size: 14px;
        background: #fff;
    }
    .leftBottom {
        margin-top:2%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        padding:2% 2% 0 2%;
        background: #fff;
    }
    .leftBottom_data{
        margin-top: 2%;
    }
    .page {
        line-height: 34px;
        font-size: 13px;
        color: #676a6c;
    }
    .rightTop{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        padding:2% 2% 0 2%;
        background: #fff;
    }
    .rightBottom{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        padding:2% 2% 0 2%;
        margin-top: 4%;
        background: #fff;
    }
    [v-cloak]{
        display: none;
    }
    
</style>